<template>
    <div>
        <el-select style="width: 35%" v-model="value.year" @change="onYearChange">
            <el-option v-for="v in years" :key="v.value" :label="v.value" :value="v.value"></el-option>
        </el-select>
        <span>年</span>
        <el-select style="width: 22.5%" v-model="value.month" @change="onMonthChange">
            <el-option v-for="v in months" :key="v.value" :label="v.value" :value="v.value"></el-option>
        </el-select>
        <span>月</span>
        <el-select style="width: 22.5%" v-model="value.day" @change="onDayChange">
            <el-option v-for="v in days" :key="v.value" :label="v.value" :value="v.value"></el-option>
        </el-select>
        <span>日</span>
    </div>
</template>

<script>

    import CSRQ from "@/components/Form/computed/CSRQ";
    export default {
        name: "BirthdayPicker",
        props:{
            value:{
                type:Object
            }
        },
        data(){


           let y = this.value.year;
            let m = this.value.month;


            const years = this.getYears();
            return {
                years,
                months:this.getMonths(),
                days:this.getDays(y,m),

            }
        } ,

        watch:{

          value:{
              handler(nv) {

                  console.log(nv);
                  this.$emit('change',{"day":nv.day,"month":nv.month,"year":nv.year})
              },
              deep:true,
              immediate:true
          }
        },


        methods:{
            ...CSRQ,



            onYearChange(v) {
                if (this.value.month === "") {
                    this.onMonthChange(1);
                }
                if (!this.isRunnian(v) && this.value.month === 2 && this.value.day === 29) {
                    //this.value.day = 1;
                   this.value.day = 1;
                }
                this.value.year = v;

            },

            onMonthChange(v) {

                this.days = this.getDays(this.value.year,v);
                if (this.value.day === "") {
                    this.value.day = 1;
                }
                if(this.value.day > this.days.length ){
                    this.value.day = 1;
                }
                this.value.month = v;
            },

            onDayChange(v) {
                this.value.day = v;
            }
        }
    }
</script>

<style scoped>

</style>